<template>
    <div class="App-root">
        <router-view v-slot="{ Component }">
            <transition name="scale" mode="out-in">
                <component :is="Component" />
            </transition>
        </router-view>

        <!-- 侧边弹窗 -->
        <myPopups ref="myPopups_dom" class="popups"></myPopups>

        <!-- 右上角的消息弹窗 -->
        <myMessageBox ref="myMessageBox_dom" class="messageBox"></myMessageBox>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import myPopups from '@/views/popups/index.vue'
import myMessageBox from "@/components/messageBox/index.vue";

import popupsManager from '@/manager/popupsManager.js'
import messageManager from '@/manager/messageManager.js'

const myPopups_dom = ref();
const myMessageBox_dom = ref();
onMounted(() => {
    setTimeout(() => {
        popupsManager.init(myPopups_dom.value);
        messageManager.init(myMessageBox_dom.value);
    }, 500);
})
</script>

<style scoped lang="scss">
.App-root {
    width: 100vw;
    height: 100vh;
    overflow-y: auto;

    .popups {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
    }

    .messageBox {
        position: absolute;
        top: 0px;
        right: 0px;
    }
}
</style>
